<template>
  <el-card>
    <!-- 上列表格信息 -->
    <form-info-list ref="formInfo" :info.sync="tableData" />
    <!-- 上列表格信息 -->
    <el-tabs v-model="activeName">
      <el-tab-pane label="字段信息" name="cloum">
        <el-table
          ref="dragTable"
          :data="tableData.columnVOList"
          row-key="columnId"
          :max-height="tableHeight"
        >
          <el-table-column
            label="字段列名"
            prop="columnName"
            fixed
            width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="数据类型"
            prop="columnType"
            min-width="150"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="字段描述" min-width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.columnDes" />
            </template>
          </el-table-column>
          <el-table-column label="主键" min-width="50">
            <template slot-scope="scope">
              <el-radio
                v-model="scope.row.isPrincipal"
                label="1"
                @change="onPrChange(scope, $event)"
                >{{ "" }}</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column label="列表" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isList" true-label="1" />
            </template>
          </el-table-column>
          <el-table-column label="新增" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isAdd" true-label="1" />
            </template>
          </el-table-column>
          <el-table-column label="编辑" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isEdit" true-label="1" />
            </template>
          </el-table-column>
          <!-- <el-table-column label="导出" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isExport" true-label="1" />
            </template>
          </el-table-column> -->
          <el-table-column label="必填" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isRequired" true-label="1" />
            </template>
          </el-table-column>
          <el-table-column label="查询" min-width="50">
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.isSelect" true-label="1" />
            </template>
          </el-table-column>

          <el-table-column label="查询方式" min-width="100">
            <template slot-scope="scope">
              <el-select v-model="scope.row.selectType" clearable>
                <el-option
                  v-for="(item, index) in selectType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="显示类型" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.columnInputType" clearable>
                <el-option
                  v-for="(item, index) in columnInputType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="占用行" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.spaceRow">
                <el-option
                  v-for="(item, index) in spaceRow"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="验证类型" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.columnValidateType" clearable>
                <el-option
                  v-for="(item, index) in columnValidateType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
           <el-table-column label="字典数据来源" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.dictDataType">
                <el-option v-for="(item, index) in dictDataType" :key="index" :label="item.label" :value="item.value" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="字典编码" min-width="120">
            <template slot-scope="scope">
              <el-input v-model="scope.row.dictCode" />
            </template>
          </el-table-column>
          <el-table-column label="增强编码" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.strongCode" clearable>
                <el-option
                  v-for="(item, index) in strongCode"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="排序类型" min-width="120">
            <template slot-scope="scope">
              <el-select v-model="scope.row.orderType" clearable>
                <el-option
                  v-for="(item, index) in orderType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-form label-width="100px">
      <el-form-item
        style="text-align: center; margin-left: -100px; margin-top: 10px"
      >
        <el-button type="primary" :loading="submitLoading" @click="submitForm()"
          >提交</el-button
        >
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script>
import formInfoList from "./formInfoList";
import Sortable from "sortablejs";
// import { jsonPage, submitData, initSelect } from "../../online/designPage";
import { jsonPage, submitData, initSelect } from '@/views/formCreate/online/designPage'
// import { doGet, doPost, doDelet, doPut } from "@/router/axios";
import { formCreate } from "@/api/index";
export default {
  name: "GenEdit",
  components: {
    formInfoList,
  },
  data() {
    return {
      // 提交加载
      submitLoading: false,
      pageColumn: {
        label: "",
        prop: "",
        fixed: true,
      },
      idName: "",
      // 选中选项卡的 name
      activeName: "cloum",
      // 表格的高度
      tableHeight: document.documentElement.scrollHeight - 245 + "px",
      // 表列信息
      columnInputType: [],
      columnValidateType: [],
      orderType: [],
      selectType: [],
      validateType: [],
      strongCode: [],
      spaceRow: [],
      // 字典信息
      dictOptions: [],
      dictDataType:[
        {
          label: '字典',
          value: '0'
        },
        {
          label: '维度',
          value: '1'
        }
      ],
      // 菜单信息
      menus: [],
      // 表详细信息
      tableData: {
        databaseId: "",
        databaseName: "",
        columnVOList: [],
        buttonVOList: [],
        tableName: "",
        pageTitle: "",
        tableDes: "",
        remarks: "",
      },
    };
  },
  created() {
    this.initTable();
    this.codeStrongQueryForDicts()
    this.dictData("D000013", "columnInputType");
    this.dictData("D000014", "selectType");
    this.dictData("D000015", "columnValidateType");
    this.dictData("D000017", "spaceRow");
    this.dictData("D000018", "orderType");
    // this.dictData("D000019", "strongCode");
   
  },
  mounted() {},
  methods: {
    codeStrongQueryForDicts(){
      formCreate.codeStrongQueryForDict().then((res)=>{
       this.strongCode = res
       console.log(this.strongCode,'strongCode')
      })
    },
    // 行拖拽
    rowDrop() {
      const tbody = document.querySelector(".el-table__body-wrapper tbody");
      const selft = this;
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const tData = selft.tableData.columnVOList;
          const currRow = tData.splice(oldIndex, 1)[0];
          tData.splice(newIndex, 0, currRow);
          selft.tableData.columnVOList = [];
          setTimeout(() => {
            selft.tableData.columnVOList = tData;
          }, 5);
        },
      });
    },
    dictData(no, data) {
      const that = this;
      // doGet("/api-sys/sys/dict/autoCache/" + no).then((res) => {
      //   that[data] = res.data.data;
      // });
      this.$getDict(no).then(res => {
      that[data] = res.datas
    })
    },
    /** 提交按钮 */
    submitForm() {
      let params = jsonPage(this.tableData);
      this.submitLoading = true;
      // this.listLoading = true;
      params = submitData(params);
      params.tableId = this.$route.query.id;
      // doPost("/online/tableInfo/allocation", params)
      //   .then((res) => {
      //     if (res.data.code === 200) {
      //       this.$message.success("配置成功");
      //       this.$router.push({
      //         path: "/online/tableInfo/databaseManage",
      //         query: { t: Date.now() },
      //       });
      //       return false;
      //     } else {
      //       this.listLoading = false;
      //       this.$message.error(res.data.msg);
      //     }
      //   })
      //   .catch((e) => {
      //     console.error(e);
      //   })
      //   .finally(() => {
      //     this.submitLoading = false;
      //   });
       formCreate.tableInfoAllocation(params)
        .then((res) => {
          if (res.code === 200) {
            this.$message.success("配置成功");
            this.submitLoading = false;
            this.$router.push({
              path: "/online/tableInfo/databaseManage",
              query: { t: Date.now() },
            });
            return false;
          } else {
            // this.listLoading = false;
            this.$message.error(res.data.msg);
          }
        })
        .catch((e) => {
          console.error(e);
        })
        .finally(() => {
          this.submitLoading = false;
        });
    },
    initTable() {
      // this.listLoading = true;
      const that = this;
      const tabelId = this.$route.query.id;
      that.tableData.databaseId = that.$route.query.databaseId;
       that.tableData.databaseName = that.$route.query.databaseName;
      that.tableData.tableName = that.$route.query.tableName;
      that.tableData.tableDes = that.$route.query.tableDes;
      that.tableData.pageTitle = that.$route.query.tableDes;
      that.tableData.remarks = that.$route.query.tableDes;
      // doGet("/online/tableInfo/queryTable/" + tabelId)
      //   .then((res) => {
      //     that.tableData.columnVOList = res.data.data.columnDTOList;
      //     that.tableData.tableName = res.data.data.tableName;
      //     this.listLoading = false;
      //     that.rowDrop();
      //   })
      //   .catch((e) => {
      //     console.error(e);
      //   });
        formCreate.tableInfoQueryTable(tabelId)
        .then((res) => {
          that.tableData.columnVOList = res.data.columnDTOList;
          that.tableData.tableName = res.data.tableName;
          // this.listLoading = false;
          that.rowDrop();
        })
        .catch((e) => {
          console.error(e);
        });
    },
    getFormPromise(form) {
      return new Promise((resolve) => {
        form.validate((res) => {
          resolve(res);
        });
      });
    },
    /** 关闭按钮 */
    close() {
      // this.$store.commit("DEL_TAG", this.$store.getters.tag);
      this.$router.push({
        path: "/online/tableInfo/databaseManage",
        query: { t: Date.now() },
      });
    },

    // 主键选择变化触发
    onPrChange(scope, $event) {
      this.tableData.columnVOList.forEach((item, index) => {
        if (scope.$index !== index) {
          item.isPrincipal = "0";
        }
      });
    },
  },
};
</script>
